import { MenuComponent } from './menu.component';
import { Component, OnInit, Input, TemplateRef, ElementRef, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { ElementuiService } from './../elementui.service';

@Component({
  selector: 'el-menu-item',
  templateUrl: './menu-item.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MenuItemComponent implements OnInit {
  rootMenu!: MenuComponent;
  private subMenu: any;
  private sanitizer: any;
  private el: any;
  private router: any;
  private inSubmenu: any;
  @Input() disabled: boolean = false;
  @Input() index: string = '';
  @Input() title: string = '';
  @Input() to: string = '';
  @Input() extras?: any = {};

  constructor(rootMenu: MenuComponent, sanitizer: DomSanitizer, el: ElementRef, router: Router, private ElementuiService: ElementuiService) {
    this.rootMenu = rootMenu;
    // this.subMenu = subMenu;
    this.sanitizer = sanitizer;
    this.el = el;
    this.router = router;
  }

  ngOnInit(): void {
    this.inSubmenu = this.ElementuiService.isParentTag(this.el.nativeElement, 'el-submenu');
    this.ElementuiService.removeNgTag(this.el.nativeElement);
  }


  color() {
    return this.rootMenu.model === this.index ?
      (this.rootMenu.activeTextColor ? this.rootMenu.activeTextColor : '#409eff')
      : this.rootMenu.textColor ? this.rootMenu.textColor : '#909399';
  }

  borderColor() {
    // not show border in group
    var /** @type {?} */ dontShowBorder = this.inSubmenu && this.subMenu;
    if (dontShowBorder)
      return 'transparent';
    return this.rootMenu.showBorderIndex === this.index ?
      (this.rootMenu.activeTextColor ? this.rootMenu.activeTextColor : '')
      : 'transparent';
  }

  clickHandle() {
    var /** @type {?} */ comRef = this.subMenu || this.rootMenu;
    comRef.selectHandle(this.index);
    var /** @type {?} */ nextBorderIndex = (this.inSubmenu && this.subMenu) ? this.subMenu.index : this.index;
    this.rootMenu.showBorderIndex = nextBorderIndex;
    this.to && this.router.navigateByUrl(this.to, this.extras);
  }
}
